import { useSelector, useDispatch } from 'react-redux';
import store from '@/store'

type RootState = ReturnType<typeof store.getState>

function View() {
  // 通过useSelector获取仓库数据
  const { num, arr } = useSelector((state: RootState) => ({
    num: state.NumStateReducer.num,
    arr: state.ArrStateReducer.arr,
  }));
  // 通过useDispatch修改数据
  const dispatch = useDispatch();
  const chageNum = () => {
    dispatch({ type: 'add3', val: 200 });
  };
  const chageArr = () => {
    dispatch({ type: 'arrpush', val: 20 });
  };

  return (
    <div className="box">
      <p>这是Page1的页面</p>
      <p>{num}</p>
      <button onClick={chageNum}>修改num</button>
      <p>{arr}</p>
      <button onClick={chageArr}>修改arr</button>
    </div>
  )
}

export default View